<template>
	<view class="load" v-if="!load">
      <u-loading-icon
        mode="circle"
        inactive-color="#fff"
        text="正在加载..."
        vertical
      ></u-loading-icon>
    </view>
    <view v-else class="trends">
        <view class="fixbox">
            <view class="fix">
                <top-status></top-status>
                <view class="tabsBack">
                    <view @click="goBack()" class="blackbox">
                        <!-- <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152491719361330.png"
                                        mode="widthFix"></image> -->
                        <uni-icons color="black" type="left" size="30"></uni-icons>
                    </view>
                    <view class="topTitle hiddenText">{{reqData.ShopName?reqData.ShopName:""}}</view>
                </view>
                <view class="contnet">
                    <image class="skiimg" :src="reqData.ShopLogo" mode="aspectFill"></image>
                    <view class="skicon">
                        <view class="skiname">{{reqData.ShopName}}</view>
                        <view class="skinum">{{'打卡记录：'+reqData.MyTakeNum}}</view>
                    </view>
                </view>
				<view class="addbox" @click="openMap">
				<image class="addimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715066866839518.png" mode="widthFix"></image>
				<view class="addtext">{{reqData.Address +' | '+reqData.Distance+'km'}}</view>
				<!-- <image class="addimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1711011951088796.png"></image> -->
				</view>
				<view class="navbox">
					<view class="navtext" :class="{'navtext4':index == navindex}" v-for="(item,index) in navList" :key="index" @click="swicthnav(index)">{{item}}
					<view class="downline" v-if="index == navindex"></view>
					</view>
				</view>
            </view>
        </view>
        <!-- <view class="navbox">
            <view class="navtext" :class="{'navtext4':index == navindex}" v-for="(item,index) in navList" :key="index" @click="swicthnav(index)">{{item}}
            <view class="downline" v-if="index == navindex"></view>
            </view>
        </view> -->
        <block v-if="list.length > 0">
            <view class="list" id="listArea">
						<view class="item" v-for="(item,index) in list" :key="index">
							<view class="item_hd wap" @click="nav_to(`/pages/user/user_visitor?id=${item.UserID}`)">
								<view class="left">
									<view class="cover">
										<image :src="item.HeadImgUrl" mode="aspectFill" />
									</view>
									<view style="flex: 1;">
										<view class="item_namebox">
											<view class="item_name">{{item.Name?$util.entitiesToUtf16(item.Name):''}}</view>
											<view class="f3 c3">{{getTime(item.CreateTime)}}</view>
										</view>
										<view class="f3 c3">{{ getYearStr(item.Birthday) }}后 
										</view>
									</view>
									
									
								</view>
							</view>
							<view class="item_bd">
								<view class="describe" v-if="item.Content">
									<text class="describetext2">{{ item.Content ? $util.entitiesToUtf16(item.Content) : '' }}</text>
								</view>
								<view class="mt20" @click.stop="''" v-if="item.IsVideo === 0 ">
									<view class="one" @click.stop="lookimg(item.Images)" v-if="JSON.parse(item.Images).length == 1">
										<image class="simg" :src="JSON.parse(item.Images)[0]+'?x-oss-process=image/resize,m_fill,w_1500'"
											mode="widthFix" @click.stop="lookimg(item.Images,0)" />
									</view>
									<view class="two" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 2">
										<view class="two-one" @click.stop="lookimg(item.Images,0)">
											<image class="simg" :src="JSON.parse(item.Images)[0]+'?x-oss-process=image/resize,m_fill,w_1500'"
												mode="aspectFill" />
										</view>
										<view class="two-two">
											<image class="simg" :src="JSON.parse(item.Images)[1]+'?x-oss-process=image/resize,m_fill,w_1500'"
												mode="aspectFill" @click.stop="lookimg(item.Images,1)" />
										</view>
									</view>
									<view class="three" @click.stop="lookimg(item.Images)"
										v-else-if="JSON.parse(item.Images).length == 3">
										<view class="three-one" @click.stop="lookimg(item.Images,0)">
											<image class="simg" :src="JSON.parse(item.Images)[0]+'?x-oss-process=image/resize,m_fill,w_1500'"
												mode="aspectFill" />
										</view>
										<view class="three-two">
											<image class="simg" :src="JSON.parse(item.Images)[1]+'?x-oss-process=image/resize,m_fill,w_1500'"
												mode="aspectFill" @click.stop="lookimg(item.Images,1)" />
											<image class="simg" :src="JSON.parse(item.Images)[2]+'?x-oss-process=image/resize,m_fill,w_1500'"
												mode="aspectFill" @click.stop="lookimg(item.Images,2)" />
										</view>
									</view>
									<view class="four" @click.stop="lookimg(item.Images)" v-else-if="JSON.parse(item.Images).length == 4">
										<view class="four-one">
											<view class="four-one-one" @click.stop="lookimg(item.Images,0)">
												<image class="simg"
													:src="JSON.parse(item.Images)[0]+'?x-oss-process=image/resize,m_fill,w_1500'"
													mode="aspectFill" />
											</view>
											<view class="four-one-two" @click.stop="lookimg(item.Images,1)">
												<image class="simg"
													:src="JSON.parse(item.Images)[1]+'?x-oss-process=image/resize,m_fill,w_1500'"
													mode="aspectFill" />
											</view>
										</view>
										<view class="four-two">
											<view class="four-two-one" @click.stop="lookimg(item.Images,2)">
												<image class="simg"
													:src="JSON.parse(item.Images)[2]+'?x-oss-process=image/resize,m_fill,w_1500'"
													mode="aspectFill" />
											</view>
											<view class="four-two-two" @click.stop="lookimg(item.Images,3)">
												<image class="simg"
													:src="JSON.parse(item.Images)[3]+'?x-oss-process=image/resize,m_fill,w_1500'"
													mode="aspectFill" />
											</view>
										</view>
									</view>
									<view class="five" v-else>
										<view class="five-one" v-for="(imgs,index) in JSON.parse(item.Images)" :key="index">
											<image @click.stop="lookimg(item.Images,index)"
												:src="imgs+'?x-oss-process=image/resize,m_fill,w_1500'" mode="aspectFill" />
										</view>
									</view>
								</view>
								<view class="video_box" v-else @click.stop="">
									<video :src="JSON.parse(item.Images)[0]"
										:poster="JSON.parse(item.Images)[0]+'?x-oss-process=video/snapshot,t_1,m_fast,ar_auto'"></video>
								</view>
							</view>

							<view class="all-list">
								<view class="upvote">
									<view class="zan-time">
										{{item.City?item.City:''}}
									</view>
									<view class="zan-review">
										<view class="zan" @click="zan(item.ID)">
											<uni-icons type="heart" size="24" color="#9b9b9b" v-if="item.IsMyZAN==0"></uni-icons>
											<uni-icons type="heart-filled" size="24" color="#ef4034" v-else></uni-icons>
											<text>{{item.CommunityZAN.length>0?item.CommunityZAN.length:''}}</text>
										</view>
										<view class="zan" @click="open_gift(item)">
											<uni-icons type="gift" size="24" color="#9b9b9b" v-if="item.IsSendGift==0"></uni-icons>
											<uni-icons type="gift-filled" size="24" color="#ef4034" v-else></uni-icons>
											<text>{{item.TotalGiftNum>0?item.TotalGiftNum:''}}</text>
										</view>
										<view class="zan" @click="tocommit(item.ID,0)">
											<uni-icons type="chatbubble" size="24" color="#9b9b9b"></uni-icons>
											<text>{{item.CommunityComments.length>0?item.CommunityComments.length:''}}</text>
										</view>
										<view class="c">
											<!-- #ifdef MP-WEIXIN -->
											<!-- <button hover-class="none" open-type="share" :data-id="item.ID">
												<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717484310589825.png">
												</image>
											</button> -->
											<image class="icon_pad" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717484310589825.png" @click="openshar(item.ID)"></image>
											<!-- #endif -->
											<!-- #ifdef APP-PLUS -->
											<button hover-class="none" @click="app_share(item)">
												<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1717484310589825.png">
												</image>
											</button>
											<!-- #endif -->
										</view>
									</view>

								</view>


								<view class="review-list" v-if="item.CommunityComments.length>0">
									<view class="list" v-for="(review,c_index) in item.CommunityComments" :key="review.ID">
										<view class="content" @click="comment_edit(index,c_index,)" v-if="review.ReplyID>0">
											<text>{{review.Name?$util.entitiesToUtf16(review.Name):''}} 回复 {{review.Pre_Name?$util.entitiesToUtf16(review.Pre_Name):''}}:</text>{{review.Content?$util.entitiesToUtf16(review.Content):''}}
										</view>
										<view class="content" @click="comment_edit(index,c_index,review.Name)" v-else>
											<text>{{review.Name?$util.entitiesToUtf16(review.Name):''}}:</text>{{review.Content?$util.entitiesToUtf16(review.Content):''}}
										</view>
									</view>
								</view>
							</view>

							<view class="load" v-if="bottom_load">
								<u-loading-icon mode="circle" inactive-color="#fff" vertical></u-loading-icon>
							</view>
						</view>
						<view style="height: 200rpx;"></view>
					</view>
        </block>
        <block v-else>
            <view class="kongbox">
                <image class="kongimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1730274238822416.png"></image>
                <view class="kongtext">期待你来打卡～</view>
            </view>
        </block>

        <!-- 发布 -->
      <view class="eveaddbtn" @click="openre">
          <image class="fabuimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1730255763071946.png"></image>
      </view>

      <!-- 赠送礼物弹出层 -->
		<uni-popup ref="gift" type="center">
			<view class="x-popup">
				<view class="popup-title">赠送对方礼物
					<view class="xiaoju-popup-close" @click="$refs['gift'].close()">关闭</view>
				</view>
				<scroll-view class="popup-wrap" scroll-y="true" :show-crollbar="true" scroll-with-animation="true">
					<view class="x-list">
						<view v-for="(l,i) in gift" :key="i" @click="gift_active=i" class="list-cell"
							:class="{'list-active':i==gift_active}">
							<image class="list-icon" :src="l.Icon?l.Icon:'/static/img/icon_bbt.png'" mode=""></image>
							<view v-if="i!=gift_active" class="list-name"> {{l.Name}} </view>
							<view class="list-price"> ￥{{l.Price}} </view>

							<view v-if="i==gift_active" class="list-btn">
								<view class="add" @click="gift_num_reduce(l)">-</view>
								<view class="count">
									<input type="text" v-model="l.Num" />
								</view>
								<view class="add" @click="gift_num_plus(l)">+</view>

							</view>
						</view>
					</view>
				</scroll-view>
				<view class="popup-btn" @click="giftEvent">赠送</view>
			</view>
		</uni-popup>

    <uni-popup ref="share" type="bottom">
			<view class="x-share">
				<view class="item">
					<!-- <image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image> -->
					<button hover-class="none" open-type="share" :data-id="Dynamic">
						<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/172765876400472.png"></image>
					</button>
					<span>转发好友</span>
				</view>
				<view class="item" @click="sharexc()">
					<image style="margin-bottom: 44rpx;" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17276587480201161.png"></image>
					<span>保存到相册</span>
				</view>
			</view>
		</uni-popup>

    <inputBox :commit="commit" @submit="submit"></inputBox>
    </view>
</template>

<script>
import topStatus from "@/components/topStatus/topStatus.vue";
import inputBox from "./components/input-box.vue";
export default {
components: {
    topStatus,
    inputBox,
},
data() {
return {
    navList:['全部','最新','人气'],
    navindex:0,
    Sortindex:0,
    list:[],
    PageIndex:1,
    PageSize:10,
    skiID:0,
    reqData:{},
    user:{},
    zan_id:0,
    sel_community:{},
    gift:[],
    gift_active: -1, //当前选中礼物
    commit:false,
    review_id:'',
    comment_id:'',
    Dynamic:'',
	longitude:'',
	latitude:'',
	load:false,
};
},
onLoad(e){
  this.skiID = e.id
  this.getCity()
//   this.getskide()
  this.getskicom()
  // 获取礼物列表
	this.GetGift();
},
onShow(){
  this.user = uni.getStorageSync('user');
},
//下拉刷新
  onPullDownRefresh(){
    this.PageIndex = 1
    this.list  = []
    this.getskicom()
    uni.stopPullDownRefresh()
  },
  // // 触底事件
  onReachBottom() {
    this.PageIndex++
    this.getskicom()
  },
methods: {
	// 获取定位
    getLocationSysc() {
      let _this = this;
      return new Promise((resolve, reject) => {
        uni.getLocation({
          type: "gcj02",
          success: function (res) {
            resolve(res);
          },
          fail: function (err) {
            const defaultLocation = {
              latitude: 0,
              longitude: 0,
            };
            resolve(defaultLocation);
          },
        });
      });
    },
    async getCity() {
      try {
        let loc = await this.getLocationSysc();
        this.longitude = loc.longitude;
        this.latitude = loc.latitude;
      } catch (err) {
        this.longitude = err.longitude;
        this.latitude = err.latitude;
      }
      this.getskide()
    },
	openMap(item) {
			if (this.reqData.Longitude>0 && this.reqData.Latitude>0) {
				uni.openLocation({
					latitude: this.reqData.Latitude,
					longitude: this.reqData.Longitude,
					scale:18,
					success: function () {
						console.log('success');
					},
					fail: function (err) {
						console.error('打开位置失败，错误信息：', err);
					},
				
				});
			}else{
				// this.$pv.msg('地址异常，无法查看');
			}
			
		},
  sharexc(){
				this.nav_to('/pages/album/transcript?id='+this.Dynamic)
				this.$refs.share.close()
			},
  openshar(id){
				this.Dynamic = id
				this.$refs.share.open()
			},
  async submit(val) {
				if (val != '') {
					let utf16 = this.$util.utf16ToEntities(val).slice(0,200);
					let res = await this.$api.post('/Community/UserComment', {
						CommunityID: this.review_id,
						Content: utf16,
						CompanyID: 6002,
						ReplyID: this.comment_id
					});
					if (JSON.stringify(res.data) == 'true') {

						this.list.forEach((item, index) => {
							if (item.ID == this.review_id) {
								item.CommunityComments.push({
									UserID: uni.getStorageSync('user').UserID,
									HeadImgUrl: uni.getStorageSync('user').HeadImgUrl,
									Name: uni.getStorageSync('user').Name,
									Content: val,
									CreateTime: new Date(),
									ReplyID: this.comment_id,
									Pre_Name:this.repname,
								})
								this.list.splice(index, 1, item);
							}
						});

						this.commit = !this.commit;

					}
				} else {
					this.$pv.msg('评论不能为空')
				}
			},
  // 评论
			tocommit(ID, C_ID) {
				let _this = this;
				if(_this.user.IsAuth == 0){
					uni.showModal({
						title: '温馨提示',
						content: '您还没注册，请先注册',
						confirmText: '确定',
						success: function(rs) {
							if (rs.confirm) {
									_this.nav_to('/pages/start/start2')
									return
							} else if (rs.cancel) {

							}
						}
					});
				}
				this.commit = !this.commit
				this.review_id = ID
				this.comment_id = C_ID
			},
  async giftEvent() {

				// 当前选中礼物
				const l = this.gift[this.gift_active]

				const gift_s_price = l.Price;
				const gift_price = l.Price * l.Num;


				const MessageId = Math.random().toString().substr(2, 10);

				let res_gift = await this.$api.post('Friend/SendGift', {
					Price: gift_price,
					GiftID: l.ID,
					GiftName: l.Name,
					GiftQty: l.Num,
					ToUserID: this.sel_community.UserID,
					EventID: this.sel_community.ID,
					SendType: '球友圈赠送',
					MessageId: MessageId
				});


				// 支付请求
				let pres = await this.$api.post('Payment/PayV2', {
					total_fee: gift_price,
					EventType: '赠送礼物',
					EventID: JSON.stringify(res_gift.data),
					body: l.Name,
					// #ifdef MP-WEIXIN
					PayChannel: "weixin",
					// #endif
					// #ifdef APP
					PayChannel: "app"
					// #endif
				});
				// 已余额支付成功
				if (pres.data == 0) {
					// 提示赠送成功
					this.$pv.msg('礼物赠送成功');
					// 关闭礼物弹出层
					this.$refs['gift'].close()

					this.list.forEach((item, index) => {
						if (item.ID == this.sel_community.ID) {
							item.IsSendGift = 1;
							item.TotalGiftNum = item.TotalGiftNum + l.Num;
							this.list.splice(index, 1, item);
						}
					});

					//组装消息实体
					const n_msg = {
						Price: gift_price,
						Name: l.Name,
						OutMessageId: MessageId,
						Done: 0,
						Icon: l.Icon
					}
					// 自定义对话内容(自定义消息,JSON(消息),id,判断条件)
					this.$im.sendMessage(200, JSON.stringify(n_msg), this.sel_community.UserID + '', 12).then(res => {
						console.log(JSON.stringify(n_msg));
					});

					return;
				}

				// 支付成功返回的内容
				let payObj = JSON.parse(pres.data);
				let _this = this;
				// 调用uni支付API
				uni.requestPayment({
					// 服务提供商
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success(res) {

						// 关闭礼物弹出层
						_this.$refs['gift'].close();

						_this.$pv.msg('礼物赠送成功');

						_this.list.forEach((item, index) => {
							if (item.ID == _this.sel_community.ID) {
								item.IsSendGift = 1;
								item.TotalGiftNum = item.TotalGiftNum + l.Num;
								// item.Gifts.push({
								// 	UserID: uni.getStorageSync('user').UserID
								// })
								_this.list.splice(index, 1, item);
							}
						});


						//组装消息实体
						const n_msg = {
							Price: gift_price,
							Name: l.Name,
							OutMessageId: MessageId,
							Done: 0,
							Icon: l.Icon
						}
						// 自定义对话内容(自定义消息,JSON(消息),id,判断条件)
						_this.$im.sendMessage(200, JSON.stringify(n_msg), _this.sel_community.UserID + '', 12)
							.then(res => {
								console.log(JSON.stringify(n_msg));

							});

					},
					fail(err) {
						_this.$pv.msg('支付失败');
					}
				});
			},
  //礼数数减
			gift_num_reduce(l) {

				if (l.Num >= 1) {
					l.Num--
				}
			},
			//礼物数加
			gift_num_plus(l) {
				if (l.Num >= 0) {
					l.Num++
				}
			},
  async GetGift() {
    let res = await this.$api.post('Friend/GetGift');
    this.gift = res.data || [];
  },
  // 赞
			async zan(zid) {
				let _this = this;
				if(_this.user.IsAuth == 0){
					uni.showModal({
						title: '温馨提示',
						content: '您还没注册，请先注册',
						confirmText: '确定',
						success: function(rs) {
							if (rs.confirm) {
									_this.nav_to('/pages/start/start2')
									return
							} else if (rs.cancel) {

							}
						}
					});
				}
				this.zan_id = zid;
				let res = await this.$api.post('Community/ZAN', {
					ID: zid
				});

				if (JSON.stringify(res.data) == 'true') {
					this.$pv.msg('点赞成功');

					this.list.forEach((item, index) => {
						if (item.ID == zid) {
							item.IsMyZAN = 1;
							item.CommunityZAN.push({
								UserID: uni.getStorageSync('user').UserID,
								HeadImgUrl: uni.getStorageSync('user')
									.HeadImgUrl
							})
							this.list.splice(index, 1, item);
						}
					});
				} else {
					this.$pv.msg(res.message);
				}
			},
  open_gift(item) {
				let _this = this;
				if(_this.user.IsAuth == 0){
					uni.showModal({
						title: '温馨提示',
						content: '您还没注册，请先注册',
						confirmText: '确定',
						success: function(rs) {
							if (rs.confirm) {
									_this.nav_to('/pages/start/start2')
									return
							} else if (rs.cancel) {

							}
						}
					});
				}
				this.sel_community = item;
				// #ifdef APP
				uni.navigateTo({
					url: '/pages/dynamic/community_gift?item=' + JSON.stringify(item)
				})
				// #endif
				// #ifndef APP
				this.$refs['gift'].open()
				// #endif
			},

  lookimg(url, index) {
    let arr = JSON.parse(url);
    uni.previewImage({
      urls: arr,
      current: index,
    })
  },
  openre(){
    this.nav_to('/pages/dynamic/dynamic_add?skiid='+this.skiID)
  },
  
  async getskide(){
    let res =await this.$api.post('Shop/Detail',{
      	ID:this.skiID,
	  	Latitude:this.latitude,
    	Longitude:this.longitude,
    })
    if(res.code == 0){
      this.reqData = res.data
	  this.load = true
    }
  },
  async getskicom(){
    let res= await this.$api.post('Shops/Community',{
      ShopID:this.skiID,
      PageIndex:this.PageIndex,
      PageSize:this.PageSize,
      Sort: this.Sortindex
    })
    if(res.code == 0){
      if(this.PageIndex == 1){
        this.list = res.data
      }else{
        this.list = this.list.concat(res.data)
      }
    }
  },
    goBack() {
      const pages = getCurrentPages();
      if (pages.length > 1) {
        // 如果页面栈长度大于1，则说明有上一页，可以返回
        uni.navigateBack();
      } else {
        // 如果没有上一页，则导航到首页
        uni.reLaunch({
          url: '/pages/tab/assistant'
        });
      }
    },
    swicthnav(index){
      this.navindex = index
      this.PageIndex = 1
      if(index == 0){
          this.Sortindex = 0
      }else if(index ==1){
        this.Sortindex = 2
      }else{
        this.Sortindex = 1
      }
      this.getskicom()
    },
},
}
</script>
<style lang='scss'>
page{
  background-color: #f6f6f6;
}
button::after {
	border: none;
}
.fixbox{
    width: 100%;
    height: 612rpx;
    // border-bottom: 1rpx solid #e4e4e4;
    background-color: #f6f6f6;
}
.fix{
    width: 100%;
    background-color: #f6f6f6;
    position: fixed;
    top: 0;
    left: 0;
	z-index: 10;
      .tabsBack {
    height: 44px;
    padding-left: 32rpx;
    display: flex;
    align-items: center;
    z-index: 999;

    .topTitle {
      padding-left: 144rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
      width: 300rpx;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
    }

    .blackbox {
      width: 52rpx;
      height: 52rpx;
      display: flex;
      align-items: center;
    }

    image {
      width: 24rpx;
      height: 36rpx;
      display: block;
    }
  }
}
    .contnet{
        width: 702rpx;
        height: 176rpx;
        // background: #FFFFFF;
        border-radius: 16rpx;
        margin-top: 32rpx;
        margin-bottom: 24rpx;
        padding: 24rpx;
        box-sizing: border-box;
        display: flex;
        align-items: center;
		// border-bottom: 1rpx solid #e4e4e4;
     .skiimg{
        width: 128rpx;
        height: 128rpx;
        background: #F0F0F0;
        border-radius: 16rpx;
        margin-right: 24rpx;
     }   
     .skicon{
        .skiname{
            font-size: 32rpx;
            font-weight: bold;
            color: #333333;
            margin-bottom: 16rpx;
        }
        .skinum{
            font-size: 28rpx;
            color: #999999;
        }
     }
    }
	.addbox{
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		.addtext{
			// padding: 0 24rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.addimg{
			width: 42rpx;
			height: 32rpx;
			margin-right: 20rpx;
		}
	}
.navbox{
  display: flex;
  align-items: center;
  width: 100%;
  height: 86rpx;
  margin-top: 32rpx;
	border-top: 1rpx solid #e4e4e4;
    padding-top: 20rpx;
//   border-bottom: 1rpx solid #e4e4e4;
  .navtext{
    color: #999999;
    font-size: 28rpx;
    margin-left: 60rpx;
    position: relative;
  }
  .navtext4{
    color: #333333 !important;
    font-size: 32rpx;
    font-weight: bold !important;
  }
  .downline{
    position: absolute;
    bottom: -10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 40rpx;
    height: 6rpx;
    background: #141517;
    border-radius: 4rpx;
  }
}
.kongbox{
    width: 200rpx;
    height: 200rpx;
    margin: 200rpx auto;
    .kongimg{
        width: 200rpx;
        height: 200rpx;
    }
    .kongtext{
        font-size: 24rpx;
        color: #999999;
        text-align: center;
    }
}
.eveaddbtn{
  position: fixed;
  bottom: 112rpx;
  right: 46rpx;
  .fabuimg{
    width: 120rpx;
    height: 120rpx;
  }
}


	.trends {
		height: 100vh;
		// overflow: hidden;
		.week_share {
			display: flex;
			background-color: #f4f4f4;
			// border: #848484 1rpx solid;
			width: 95%;
			margin: 10rpx auto;
			padding: 10rpx;

			image {
				width: 100%;
				height: 100rpx;
			}

			.week_act {
				color: #ffff00;
				padding: 10rpx;
				width: 70%;
				flex-direction: row;
				display: flex;

				.title {
					color: #2f2f00;
					font-size: 36rpx;
					font-weight: bold;
				}

				.desc {
					color: #81807f;
					font-size: 28rpx;
				}
			}

			.title_right {
				font-size: 32rpx;
				justify-content: center;
				justify-items: center;
				position: absolute;
				right: 40rpx;
				background-color: #FF9800;
				border-radius: 10rpx;
				padding: 12rpx;
				color: #fff;
			}

			.act {
				line-height: 40rpx;
				color: #55aaff;
			}
		}

		.item {
			background: #fff;
			border-radius: 16rpx;
      box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0,0,0,0.08);
			margin: 24rpx;
			// padding-bottom: 20rpx;
			.item_hd {
				height: 100rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-bottom: 10rpx;
				padding-top: 20rpx;

				.left {
					width: 100%;
					height: 100rpx;
					display: flex;
					align-items: center;
				}

				.cover {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50rpx;
					// border: 1px solid #7b7b7b;
					overflow: hidden;
					margin-right: 16rpx;

					image {
						height: 100%;
						width: 100%;
					}
				}
				.item_namebox{
					display: flex;
					align-items: center;
					    margin-bottom: 6rpx;
				}
				.item_name {
					color: #333;
					font-size: 32rpx !important;
					font-weight: bold;
					margin-right: auto;
				}


			}

			.item_ft {
				display: flex;
				justify-content: space-between;
				height: 60rpx;
				align-items: right;

				.ft_btn {
					display: flex;
					align-items: center;
				}

				.icon_box {
					height: 48rpx;
					width: 48rpx;
					border-radius: 48rpx;
					background: rgba(255, 255, 255, 0.9);
					margin-right: 16rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					image {
						height: 32rpx;
						width: 32rpx;
					}
				}
			}

			.item_bd {
				padding: 0 8rpx;
    			box-sizing: border-box;
          .describe{
            margin-bottom: 16rpx;
          }
				.simg {
					display: block;
					//smax-height: 750rpx;
				}
				.conrem{
					padding: 0 32rpx;
					box-sizing: border-box;
				}
				.order_div {
					width: 100%;
					margin-top: 10rpx;
					height: 80rpx;
					line-height: 80rpx;
				}
			}
		}
	}

	.add_btn {
		position: fixed;
		right: 32rpx;
		bottom: 170rpx;
		width: 96rpx;
		height: 96rpx;
		z-index: 20;
		text-align: center;
		align-items: center;
		background: #0d0d0d;
		color: #fff;
		line-height: 96rpx;
		border-radius: 100rpx;
	}

.mt20 {
  margin-top: 20rpx;

  .one {
    display: flex;
    width: 100%;
    max-height: 800rpx;
    overflow: hidden;
    //height: 400rpx;

    // image {
    //   width: 70%;
    // }
  }

  .two {
    display: flex;

    .two-one {
      width: 200rpx;
      height: 200rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
      }
    }

    .two-two {
      width: 200rpx;
      height: 200rpx;
      margin-left: 6rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
      }
    }
  }

  .three {
    display: flex;
    
    .three-one {
      image {
        width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx;
      }
    }

    .three-two {
      display: flex;

      image {
        width: 200rpx;
        height: 200rpx;
        margin-left: 6rpx;
        border-radius: 16rpx;
      }
    }
  }

  .four {
    display: flex;
    flex-direction: column;

    .four-one {
      display: flex;

      .four-one-one {
        image {
          width: 200rpx;
          height: 200rpx;
          border-radius: 16rpx;
        }
      }

      .four-one-two {
        image {
          width: 200rpx;
          height: 200rpx;
          margin-left: 6rpx;
          border-radius: 16rpx;
        }
      }
    }

    .four-two {
      display: flex;
      margin-top: 6rpx;
      .four-two-one {
        image {
          width: 200rpx;
        height: 200rpx;
        border-radius: 16rpx;
        }
      }
      .four-two-two {
        image {
          width: 200rpx;
          height: 200rpx;
          margin-left: 6rpx;
          border-radius: 16rpx;
        }
      }
    }
  }

  .five {
    display: flex;
    flex-wrap: wrap;
    width: 100%;

    .five-one {
      width: 200rpx;
      height: 200rpx;
      margin-bottom: 8rpx;
      margin-right: 4rpx;
      margin-left: 4rpx;

      image {
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
      }
    }
  }
}

	.video_box {
		height: 500rpx;
		position: relative;
		z-index: 2;

		video {
			width: 50%;
			height: 100%;
		}
	}

	.all-list {
		width: 100%;
		padding-bottom: 4rpx;
		.location {
			font-size: 30rpx;
			color: #DCC188;
		}

		.upvote {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 10rpx 20rpx;
			margin-top: 20rpx;
			// padding-bottom: 15rpx;

			.zan-time {
				font-size: 26rpx;
				color: #999999;
			}

			.zan-review {
				display: flex;
				align-items: right;
				margin: 10rpx 0;
				height: 40rpx;

				image {
					// padding-top: 26rpx;
					width: 42rpx;
					height: 42rpx;
				}

				.zan {
					margin-right: 10rpx;
					display: flex;
					align-items: center;

					text {
						height: 40rpx !important;
						// padding-left: 10rpx;
					}
				}

				button {
					display: flex;
					//height:50rpx !important;
					margin-top: -30rpx;
					background-color: unset;
					&::after{
						border: 0;
					}
				}
			}

			.gift-review {
				display: flex;
				align-items: right;

				.zan {
					margin-right: 40rpx;
				}
			}
		}

		.tishi {
			box-sizing: border-box;
			position: relative;
			height: 60rpx;
			border-radius: 6rpx;
			background-color: #ffffff;
			display: flex;
			margin-top: 30rpx;
			padding-left: 6rpx;

			text {
				line-height: 60rpx;
				font-size: 28rpx;
				color: #DCC188;
				margin-left: 12rpx;
				letter-spacing: 2px;
			}

			.sanjiao {
				position: absolute;
				top: -15rpx;
				left: 30rpx;
				width: 0;
				height: 0;
				border-left: 15rpx solid transparent;
				border-right: 15rpx solid transparent;
				border-bottom: 20rpx solid #fff;
			}
		}

		.review-list {
			width: 100%;
			.list {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				flex-wrap: wrap;
				line-height: 45rpx;

				.content {
					margin-left: 40rpx;
					font-weight: 700;
					font-size: 28rpx;
					color: #333333;
					padding-right: 20rpx;
    				box-sizing: border-box;
					text {
						box-sizing: border-box;
						color: #5f698b;
						font-weight: 500;
						padding-right: 10rpx;
						font-size: 28rpx;
					}
				}
				.del {
					font-size: 12px;
					color: #576b95;
				}
			}
		}
	}



	.x-share {
		background-color: #ffffff;
		width: 750rpx;
		// border-radius: 20rpx;
		padding: 40rpx 20rpx 80rpx;
		display: flex;
		box-sizing: border-box;

		.item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			background-color: #ffffff;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 10rpx;
			}

			span {
				color: #2e2e2e;
			}
		}

	}


	.x-popup {
		background-color: #ffffff;
		width: 650rpx;
		border-radius: 20rpx;
		padding-bottom: 20rpx;

		.popup-title {
			padding: 20rpx 0 10rpx;
			text-align: center;
			font-size: 32rpx;
			position: relative;
			color: #333;

			.xiaoju-popup-close {
				font-size: 24rpx;
				position: absolute;
				right: 50rpx;
				top: 24rpx;
				color: #333;
			}
		}

		.popup-wrap {
			max-height: 800rpx;
			min-height: 300rpx;
			padding-top: 10rpx;
			padding-bottom: 30rpx;

			.popup-cell {
				padding: 8rpx 40rpx;
				font-size: 30rpx;
				line-height: 44rpx;
			}
		}

		.popup-btn {
			margin: 0 auto;
			width: 200rpx;
			height: 60rpx;
			border-radius: 10rpx;
			color: #fff;
			font-size: 28rpx;
			letter-spacing: 2px;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #FD4C61;
		}
	}

	.x-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 0 60rpx;

		.list-cell {
			width: 27%;
			height: 170rpx;
			border: 2rpx solid #fff;
			display: flex;
			align-items: center;
			flex-direction: column;
			padding: 5rpx 0rpx 10rpx;
			border-radius: 16rpx;
			position: relative;

			&.list-active {
				border-radius: 16rpx;
				border: 2rpx solid #70737C;
			}

			.list-btn {
				width: calc(100% + 4rpx);
				height: 52rpx;
				color: #fff;
				background: #FD4C61;
				border-radius: 0rpx 0rpx 16rpx 16rpx;
				position: absolute;
				bottom: -2rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				.count {
					color: #fff;
					line-height: 60rpx !important;
          text-align: center;
					input {
						width: 40rpx;
					}
				}

				.add {

					display: flex;
					justify-content: center;
					align-items: center;
					box-sizing: border-box;
					font-size: 52rpx;
					width: 75rpx;
					color: #fff;
				}
			}

			.list-icon {
				width: 80rpx;
				height: 80rpx;
			}

			.list-name {
				color: #333;
				font-size: 26rpx;
				margin-top: 8rpx;
			}

			.list-price {
				color: #333;
				font-size: 22rpx;
				margin-top: 5rpx;
			}
		}
	}
</style>